<template>
    <div class="project-add">
        <div class="top-title">
            项目-增减变化
        </div>
        <div class="top-radio">
            <el-radio-group v-model="topRadio">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">本周</el-radio-button>
                <el-radio-button label="2">自定义</el-radio-button>
            </el-radio-group>
            <el-tooltip class="item" effect="dark" content="本周指从上个周六开始到本周周五结束" placement="top"
                style="margin-left: 20px;">
                <el-link type="primary"> <i class="el-icon-info"></i></el-link>
            </el-tooltip>
            <el-date-picker v-model="topDate" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" style="margin-left: 200px;" :disabled="topRadio != 2">
            </el-date-picker>
        </div>
        <div class="mid-context">
            <div class="left-context">
                <el-button type="primary" style="margin-top: 20px;">增减概览</el-button>
                <el-table :data="tableData" border style="margin-top: 20px;">
                    <el-table-column prop="date" label="战队名称" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="date" label="新增" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="name" label="退定" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="address" label="差额" :align="tableAlign">
                    </el-table-column>
                </el-table>
            </div>
            <div class="right-context">
                <div class="right-button">
                    <el-button type="primary" style="margin-top: 20px;">增减明细</el-button>
                    <el-button type="text" @click="toAddDetail">查看明细</el-button>
                </div>
              
                <el-table :data="tableData" border style="margin-top: 20px;">
                    <el-table-column prop="date" label="招商经理" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="date" label="新增" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="name" label="退定" :align="tableAlign">
                    </el-table-column>
                    <el-table-column prop="address" label="差额" :align="tableAlign">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            topRadio:'0',
            topDate:'',
            tableAlign:'center',
        }
    },
    methods: {
        toAddDetail(){
            this.$router.push({ path: "/dashboard/recordsDetail" });
        }
    },
}
</script>
<style lang="scss" scoped>
.project-add {
    margin-top: 30px;
    width: 100%;
    .top-title {
        border-left: 8px solid #409eff;
        margin: 20px 0;
        padding: 3px 0 3px 25px;
        font-size: 18px;
        font-weight: bold;
    }

    .top-radio {
        display: flex;
        justify-content: center;
    }
    .mid-context{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left-context{
            width: 47%;
        }
        .right-context{
            width: 47%;
            .right-button{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
}
</style>